<template>
  <div class="dictForm">
    <el-dialog :show-close="false" :visible.sync="visible" :title="title" width="40%" :before-close="closeModal">
      <el-form ref="forms" label-width="80px" :model="param" :rules="rules" size="small">
        <el-form-item label="字典名称" prop="name">
          <el-input size="mini" v-model="param.name" placeholder="请输入字典名称"></el-input>
        </el-form-item>
        <el-form-item label="字典编码">
          <el-input size="mini" v-model="param.code" placeholder="请输入字典名称"></el-input>
        </el-form-item>
        <el-form-item label="上级字典">
          <select_tree ref="trees" v-model="param.dictId" :tree="dictTree" :list="dictList" :selectedTree="selectedTree"
                       placeholder="请选上级字典" size="small"></select_tree>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group size="mini" v-model="param.status">
            <el-radio :label="0">禁用</el-radio>
            <el-radio :label="1">启用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字典描述">
          <el-input size="mini" type="textarea" :rows="2" placeholder="请输入内容" v-model="param.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
    <el-button @click="closeModal" size="small">取 消</el-button>
    <el-button type="primary" v-loading="loading" @click="submitForm" size="small">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line camelcase
import select_tree from '../../components/select-tree'
import util from '@/libs/util'
import { dictUpdate, dictCreate } from '@/api/system/dict'

export default {
  name: 'modal',
  components: { select_tree },
  props: {
    dictList: {
      // eslint-disable-next-line vue/require-valid-default-prop
      type: Array, default: []
    },
    dictTree: {
      // eslint-disable-next-line vue/require-valid-default-prop
      type: Array, default: []
    },
    initList: {
      type: Function
    }
  },
  data () {
    return {
      visible: false,
      param: {
        name: '',
        code: '',
        parentId: '',
        status: '',
        remark: ''
      },
      treeSelected: {},
      loading: false,
      title: '',
      rules: {
        name: [
          { required: true, message: '请输入字典名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态必选', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeModal () {
      this.handleReset()
      this.visible = false
      this.$refs.forms.resetFields()
    },
    openModal (param) {
      param && this.handleReset(param)
      this.title = param ? '编辑字典' : '添加字典'
      this.type = param ? 'edit' : 'add'
      this.visible = true
    },
    submitForm () {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          this.loading = true
          this.type === 'add' && this.add()
          this.type === 'edit' && this.edit()
        }
      })
    },
    add () {
      util.request(this, dictCreate, this.param, this.initList, '添加字典成功')
    },
    edit () {
      util.request(this, dictUpdate, this.param, this.initList, '编辑字典成功')
    },
    selectedTree (e) {
      this.treeSelected = e
    },
    handleReset (param) {
      this.param = {
        id: (param && param.id) || '',
        name: (param && param.name) || '',
        code: (param && param.code) || '',
        remark: (param && param.remark) || '',
        parentId: (param && param.parentId) || '',
        status: (param && param.status) || 0
      }
    }
  }
}
</script>

<style scoped>
.dictForm >>> .el-dialog {
  border-radius: 5px;
}

.dictForm >>> .el-input {
  width: 80%;
}

.dictForm >>> .el-textarea__inner {
  width: 80%;
}

.dictForm >>> .el-select {
  width: 80%;
}

.dictForm >>> .el-dialog__body {
  padding: 10px 0 0 20px;
}

.dictForm >>> .el-dialog__footer {
  padding: 0 30px 20px;
}

.dictForm >>> .el-dialog__header {
  padding: 20px 30px 10px;
}

</style>
